import React, { useState } from 'react';

export default function Header({ handleAdd }) {
  const [name, setName] = useState('');

  const handleKeyDOwn = (e) => {
    // 监听回车事件
    if (e.key === 'Enter') {
      // 7. 优化： 非空判断
      if (name) {
        // 4. 子传父：回调函数
        handleAdd(name);
        // 7. 优化： 清空输入框
        setName('');
      } else {
        alert('输入框内容为空');
      }
    }
  };
  return (
    <header className="header">
      <h1>todos</h1>
      <input
        className="new-todo"
        placeholder="需要做什么"
        autoFocus
        // 1. Header组件改造为受控组件
        value={name}
        onChange={(e) => setName(e.target.value)}
        // 2. 监听回车事件
        onKeyDown={handleKeyDOwn}
      />
    </header>
  );
}
